<template>
    <div>

        <el-row>
            <el-col>
                <h1>
                    <i class="el-icon-cherry"></i>
                    {{sysname}}
                </h1>
            </el-col>
        </el-row>

        <el-row type='flex' justify='start'>
            <el-button size='small' type='primary' @click='toadd' icon='el-icon-circle-plus-outline'>添加</el-button>
        </el-row>
        <br>
        <el-row>
            <el-col>

                <el-table :data='list' >
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="sellPoint" label="卖点"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="note" label="详情"></el-table-column>

                    <el-table-column label='[操作]'>
                      <template slot-scope='s'>
                        <el-button type='success' @click='toupdate(s.$index,s.row)' icon="el-icon-edit">修改</el-button>
                        <el-button type='danger' @click='del(s.$index)' icon="el-icon-delete">删除</el-button>
                      </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>

        <br>
        <br>

        <el-row>
            <el-col>
                <!-- 按钮 -->
                <el-switch
                        v-model="value"
                        active-color="#13ce66"
                        inactive-color="#dddddd"
                        >
                </el-switch>

            </el-col>
        </el-row>

        <br>
        <br>

          <!-- 滑动框 -->
          <div class="block">
            <span class="demonstration">.....</span>
            <el-slider v-model="value1"></el-slider>
          </div>

          <h1><!-- 暂停开始 -->
          <i class="el-icon-video-pause"></i>
          <i class="el-icon-video-play"></i>
          </h1>


    <!-- 定义对话框 -->
    <el-dialog :visible.sync='dialogVisible' width='40%' title='提示'>

      <span>
        <!-- 加入form表单 -->
        <el-form :model='m' label-width='80px'>

          <el-form-item label="标题:">
            <el-input v-model="m.title"> </el-input>
          </el-form-item>

          <el-form-item label="卖点:">
            <el-input v-model="m.sellPoint"> </el-input>
          </el-form-item>

          <el-form-item label="价格:">
            <el-input v-model="m.price"> </el-input>
          </el-form-item>

          <el-form-item label="详情:">
            <el-input v-model="m.note" type='textarea'> </el-input>
          </el-form-item>

        </el-form>
      </span>

      <span slot='footer' class="dialog-footer">
        <el-button @click='dialogVisible=false'>取消</el-button>
        <el-button @click='save' type='primary'>确定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
    export default{

        name : 'Item',
        data(){
            return{

                value1:35,

                value:true,

                sysname:'京淘电商平台',

                dialogVisible:false,//对话框是否展现，公用变量

                isUpdate : false,//判断是修改还是新增

                index:0,        //保存修改记录的索引值

                m:{
                  title:'',
                  sellPoint:'',
                  price:'',
                  note:''
                },

                list:[
                    {
                        title:'西游记',
                        sellPoint:'四大名著之一',
                        price:99,
                        note:'十万八千里'
                    },
                    {
                        title:'三国演义',
                        sellPoint:'四大名著之一',
                        price:89,
                        note:'桃园三结义'
                    },
                    {
                        title:'水浒传',
                        sellPoint:'四大名著之一',
                        price:69,
                        note:'武松打虎'
                    },
                    {
                        title:'红楼梦',
                        sellPoint:'四大名著之一',
                        price:59,
                        note:'刘姥姥救我'
                    },
                ]
            }
        },

        methods:{

            toadd:function(){

                this.dialogVisible=true; //展现对话框
                this.m={};
                this.isUpdate=false;
            },

            toupdate:function(index,row){

              this.m = JSON.parse(JSON.stringify(row));
              this.dialogVisible=true;
              this.isUpdate=true;
              this.index=index;

            },

            del:function(index){
              this.list.splice(index,1);
            },

            save:function(){

              if(!this.isUpdate){ //新增
                this.list.splice(0,0,this.m);
              }else{         //修改
                this.list.splice(this.index,1,this.m);
              }

              this.dialogVisible=false;

            },

        },


    }


</script>

<style>
  body{
    background-color: #00ffff;
  }

  textarea{
    font-family: '微软雅黑';
  }

</style>




